<template>
  <view class="navigator-page">
    <view class="page-title">navigator 页面跳转</view>

    <view class="btn-group">
      <!-- 跳转到新页面 -->
      <navigator url="/pages/components/navigator/new" hover-class="navigator-hover">
        <button type="default">跳转到新页面</button>
      </navigator>
      
      <!-- 跳转到新新页面 -->
      <navigator url="/pages/components/navigator/navigate/navigate">
        <button>跳转到新新页面</button>
      </navigator>
      
      <!-- 在当前页打开 -->
      <navigator url="/pages/components/navigator/redirect" open-type="redirect">
        <button type="default">在当前页打开</button>
      </navigator>
      
      <!-- 跳转tab页面 -->
      <navigator url="/pages/tabBar/tabcompage/tabcompage" open-type="switchTab">
        <button type="default">跳转tab页面</button>
      </navigator>
      
      <!-- 独立的自动刷新按钮（已移出navigator嵌套） -->
      <button type="default" @click="goRef">自动刷新</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'navigator',
      user: "zhixin",
      uid: "03030303"
    }
  },
  onLoad(options) {
    console.log("onLoad--->页面加载，接收参数：", options);
  },
  onShow() {
    console.log("onShow--->页面显示");
  },
  onPullDownRefresh() {
    console.log("onPullDownRefresh--->用户下拉刷新");
    // 模拟刷新延迟
    setTimeout(() => {
      uni.stopPullDownRefresh(); 
      console.log("navigator-------刷新完成");
    }, 2000)
  },
  onReady() {
    console.log("onReady--->页面初次渲染完成");
  },
  onHide() {
    console.log("onHide--->页面隐藏");
  },
  onUnload() {
    console.log("onUnload--->页面卸载");
  },
  onReachBottom() {
    console.log("onReachBottom--->页面滚动到底部");
  },
  methods: {
    // 触发下拉刷新的方法
    goRef() {
      uni.startPullDownRefresh({
        success() {
          console.log("navigator------success");
        },
        fail() {
          console.log("navigator------fail");
        },
        complete() {
          console.log("navigator------complete");
        }
      })
    },
    // 预留的跳转方法（可根据需要使用）
    goNewPage() {
      uni.navigateTo({
        url: "/pages/components/navigator/navigate/navigate?user=" + this.user + "&userid=" + this.uid
      })
    }
  }
}
</script>

<style scoped>
.navigator-page {
  padding: 20rpx;
  background-color: #fff;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.btn-group navigator, .btn-group button {
  display: block;
  margin-bottom: 20rpx;
  width: 100%; /* 确保按钮占满宽度 */
}

.navigator-hover {
  background-color: #f5f5f5; /* 点击时的背景效果 */
}
</style>